<template>
    <view>
        <view>
            <view v-if="status == 1" class="text-center text-sm padding-top-sm" style="color: #ff1b0b">兑换成功, 等待商品发货</view>
            <view v-if="status == 0" class="text-center text-sm padding-top-sm" style="color: #ff1b0b">请在{{ times }}内付款，超时订单将自动取消…</view>

            <view class="pages" v-if="status == 2 || status == 3">
                <view class="topbox" style="position: relative">
                    <image src="https://yiyueuser.oss-cn-shenzhen.aliyuncs.com/kuaidi20211028165607.png" class="topboxaddicon margin-right"></image>
                    <view>
                        <view class="toptext">
                            <view class="text-black text-lg">
                                {{ orderinfo.deliveryCompany }}
                            </view>
                        </view>
                        <view class="text-df text-darkGray margin-right-xs margin-top-xs">{{ orderinfo.deliverySn }}</view>
                    </view>
                    <view class="fuzhi text-sm text-darkGray" @tap="fuzhifun" :data-num="orderinfo.deliverySn">复制单号</view>
                    <view class="text-sm text-darkGray btn-wl" @tap="toDetail" :data-num="orderinfo.orderSn || ''">查看物流</view>
                </view>
            </view>

            <view class="pages">
                <view class="topbox" @tap="goshopingmall">
                    <view>
                        <image src="/static/images/adds.png" class="topboxaddicon margin-right"></image>
                    </view>
                    <view>
                        <view class="toptext">
                            <view class="text-black text-lg">
                                {{ orderinfo.receiverName }}
                            </view>
                            <view class="text-black text-df margin-left-sm">
                                {{ orderinfo.receiverPhone }}
                            </view>
                        </view>
                        <view class="text-df text-darkGray margin-right-xs margin-top-xs">
                            {{ orderinfo.receiverProvince }}{{ orderinfo.receiverCity }}{{ orderinfo.receiverRegion }}{{ orderinfo.receiverDetailAddress }}
                        </view>
                    </view>
                </view>
            </view>

            <view class="pages">
                <view class="contenttext">
                    <view>
                        <image :src="orderinfo.orderItemList[0].productPic" mode="aspectFill" class="contenttextimg margin-right"></image>
                    </view>
                    <view>
                        <view class="text-black text-df">
                            {{ orderinfo.orderItemList[0].productName }}
                        </view>
                        <view class="flexs justify-between margin-top-xs text-darkGrey text-sm">
                            <view>
                                <text v-for="(item, index) in orderinfo.orderItem" :key="index">{{ item.value }}</text>
                            </view>
                            <view>x{{ orderinfo.orderItemList[0].productQuantity }}</view>
                        </view>
                        <view class="centers margin-top-xs">
                            <view>
                                <text style="color: #ff1717" class="text-lg" v-if="orderinfo.orderItemList[0].productPriceStr > 0">
                                    ￥{{ orderinfo.orderItemList[0].productPriceStr }} +
                                </text>
                                <image src="/static/images/douzi.png" class="douzi"></image>
                                <text style="color: #ff1717" class="text-lg">{{ orderinfo.useIntegration }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="pages">
                <view class="numbox margin-top-sm bg-white">
                    <view>
                        <view class="numboxlist">
                            <view class="numboxlistleft">
                                <image src="/static/images/jine.png" class="numboximg margin-right-xs"></image>
                                <view class="text-df text-darkGray">商品金额:</view>
                            </view>
                            <view class="text-df text-darkGrey">¥{{ orderinfo.orderItemList[0].productPriceStr }}</view>
                        </view>
                    </view>

                    <view>
                        <view class="numboxlist">
                            <view class="numboxlistleft">
                                <image src="/static/images/yunfei2.png" class="numboximg margin-right-xs"></image>
                                <view class="text-df text-darkGray">运费:</view>
                            </view>
                            <view class="text-df text-darkGrey">¥{{ orderinfo.freightAmountStr }}</view>
                        </view>
                    </view>

                    <view>
                        <view class="numboxlist">
                            <view class="numboxlistleft">
                                <image src="/static/images/douzi.png" class="numboximg margin-right-xs"></image>
                                <view class="text-df text-darkGray">意豆:</view>
                            </view>
                            <view class="text-df" style="color: #ff1b0b">
                                {{ orderinfo.useIntegration }}
                                <text class="text-black"></text>
                            </view>
                        </view>
                    </view>

                    <view class="numboxlist numsbottom">
                        <view class="text-df text-black">订单总价:</view>
                        <view style="color: #ff1b0b">￥{{ orderinfo.totalAmountStr }}</view>
                    </view>
                </view>
            </view>

            <view class="pages">
                <view class="margin-top-sm remarks bg-white">
                    <view><image src="/static/images/remarks.png" class="remarksimg margin-left-sm"></image></view>
                    <view class="text-darkGray text-df" style="min-width: 150rpx">订单备注：</view>
                    <!-- <input style="flex:1;text-align: right;" disabled="true" value="{{orderinfo.note}}" class="margin-right-sm text-df text-darkGrey"></input> -->
                    <view style="word-break: break-all">{{ orderinfo.note }}</view>
                </view>
            </view>

            <view class="pages">
                <view class="margin-top-sm zscontent bg-white">
                    <view class="flexs justify-between">
                        <view class="flexs align-center">
                            <image src="/static/images/bianhao.png" class="remarksimg"></image>
                            <view class="text-darkGray text-df">订单编号</view>
                        </view>
                        <view class="text-darkGrey text-df">
                            {{ orderinfo.orderSn }}
                        </view>
                    </view>

                    <view class="flexs justify-between margin-top">
                        <view class="flexs align-center">
                            <image src="/static/images/time.png" class="remarksimg"></image>
                            <view class="text-darkGray text-df">下单时间</view>
                        </view>
                        <view class="text-darkGrey text-df">
                            {{ orderinfo.createTime }}
                        </view>
                    </view>
                    <view class="flexs justify-between margin-top" v-if="orderinfo.paymentTime">
                        <view class="flexs align-center">
                            <image src="/static/images/1.png" class="remarksimg"></image>
                            <view class="text-darkGray text-df">支付方式</view>
                        </view>
                        <view class="text-darkGrey text-df">
                            {{ orderinfo.payType == 1 ? '余额支付' : '微信支付' }}
                        </view>
                    </view>
                    <view class="flexs justify-between margin-top" v-if="orderinfo.paymentTime">
                        <view class="flexs align-center">
                            <image src="/static/images/zhifushij.png" class="remarksimg"></image>
                            <view class="text-darkGray text-df">支付时间</view>
                        </view>
                        <view class="text-darkGrey text-df">
                            {{ orderinfo.paymentTime }}
                        </view>
                    </view>
                </view>
            </view>

            <view class="pages">
                <view class="margin-top-sm zscontents bg-white" @tap="openkefu">
                    <view class="flexs justify-center">
                        <image src="/static/images/kefu.png" style="width: 56rpx; height: 56rpx; margin: 0 auto"></image>
                    </view>
                    <view class="text-center text-darkGray text-df margin-top-sm">联系客服</view>
                </view>
            </view>

            <!-- 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单 -->
            <view class="subbtn subbtn1" v-if="status > 2" @tap="sunfun">删除订单</view>
            <view class="pages margin-top-xl margin-bottom-xl">
                <view class="sunbtn1" @tap="czorder" data-type="1" v-if="status == 0">取消订单</view>
                <view class="sunbtn11" v-if="status == 1 && orderinfo.remindType == 1" @tap="czorder" data-type="2">提醒发货</view>
                <view class="sunbtn-type2" v-if="status == 1 && orderinfo.remindType == 2">已提醒发货</view>
                <view class="sunbtn2" v-if="status == 0" @tap="czorder" data-type="3">去付款</view>
                <view class="sunbtn11" v-if="status == 2" @tap="czorder" data-type="4">确定收货</view>
            </view>
        </view>

        <!-- 客服弹窗 -->
        <view :class="'modal bottom-modal ' + (show1 ? 'show' : '')" @touchmove.stop.prevent="preventTouchMove">
            <view class="dialog dialog-goods" style="border-radius: 40rpx 40rpx 0 0" catchtap>
                <view class="bg-white padding-xl text-center">
                    <view class="padding-top-xs text-xl text-bold">联系客服</view>
                    <view class="padding-tb text-df text-darkGrey" style="border-bottom: 1px solid #cccccc">服务时间：9:00-22:00</view>
                    <view class="padding-tb text-df text-darkGrey" @tap.stop.prevent="callphone">0755-84659719</view>
                    <view class="show_box radiues text-white text-df bg-orange text-center" @tap="getshow1">取消</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pagesb/orderdetailed/orderdetailed.js
const _request = require('../../utils/request.js');

const app = getApp();
var timerse;
export default {
    data() {
        return {
            show1: false,
            status: -1,
            times: '',
            orderinfo: null,
            productPic: '',
            productName: '',
            productQuantity: '',
            productPriceStr: 0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        const that = this;

        _request
            .get(
                '/yidou/order/getorderinfo',
                {
                    id: options.id
                },
                app.globalData.mallType
            )
            .then((res) => {
                if (res.data.code == 200) {
                    res.data.data.orderItem = JSON.parse(res.data.data.orderItemList[0].sp1);
                    this.setData(
                        {
                            orderinfo: res.data.data,
                            status: res.data.data.status
                        },
                        () => {
                            uni.setNavigationBarTitle({
                                title: this.getTitle(this.status)
                            });
                            that.gettimerse(); //倒计时
                        }
                    );
                }
            })
            .catch((error) => {
                console.log(error, 'error');
            });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
        uni.redirectTo({
            url: '/pagesb/orderlist/orderlist'
        });
        clearInterval(timerse);
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        uni.redirectTo({
            url: '/pagesb/index/index'
        });
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 删除
        sunfun() {
            let vm = this;
            uni.showModal({
                title: '温馨提示',
                content: '确认删除订单?',
                cancelText: '取消',
                confirmText: '确认',

                success(res) {
                    if (res.confirm) {
                        _request
                            .get(
                                '/yidou/order/deleteOrderById',
                                {
                                    orderId: vm.orderinfo.id
                                },
                                app.globalData.mallType
                            )
                            .then((res) => {
                                if (res.data.code == 200) {
                                    uni.showToast({
                                        title: '删除成功',
                                        icon: 'none',
                                        duration: 1000
                                    });
                                    setTimeout(() => {
                                        uni.navigateBack({
                                            delta: -1
                                        });
                                    }, 1000);
                                }
                            })
                            .catch((error) => {
                                console.log(error, 'error');
                            });
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },

        // 按钮操作
        czorder(e) {
            let vm = this;

            if (e.currentTarget.dataset.type == 1) {
                //取消订单
                uni.showModal({
                    title: '温馨提示',
                    content: this.status == 0 ? '请确认是否取消兑换商品' : '点击确认您将取消本次兑换，意豆及金额将原路返回！请确认是否取消兑换商品！',
                    cancelText: '取消',
                    confirmText: '确认',

                    success(res) {
                        if (res.confirm) {
                            _request
                                .postObj(
                                    '/yidou/order/closeOrder',
                                    {
                                        id: vm.orderinfo.id
                                    },
                                    app.globalData.mallType
                                )
                                .then((res) => {
                                    if (res.data.code == 200) {
                                        uni.showToast({
                                            title: '取消成功',
                                            icon: 'none',
                                            duration: 1000
                                        });
                                        setTimeout(() => {
                                            uni.navigateBack({
                                                delta: -1
                                            });
                                        }, 1000);
                                    }
                                })
                                .catch((error) => {
                                    console.log(error, 'error');
                                });
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            } else if (e.currentTarget.dataset.type == 2) {
                //提醒发货
                _request
                    .postObj(
                        '/yidou/order/remindDelivery',
                        {
                            orderId: vm.orderinfo.id
                        },
                        app.globalData.mallType
                    )
                    .then((res) => {
                        if (res.data.code == 200) {
                            uni.showToast({
                                title: '已提醒商家发货',
                                icon: 'none',
                                duration: 1000
                            });
                            setTimeout(() => {
                                uni.navigateBack({
                                    delta: -1
                                });
                            }, 1000);
                        }
                    })
                    .catch((error) => {
                        console.log(error, 'error');
                    });
            } else if (e.currentTarget.dataset.type == 3) {
                //去付款
                let data = this.orderinfo;
                uni.navigateTo({
                    url:
                        '/pagesb/payment/payment?orderId=' +
                        data.id +
                        '&orderSn=' +
                        data.orderSn +
                        '&realityPayPrice=' +
                        data.payAmountStr +
                        '&createordertime=' +
                        data.createtimelong
                });
            } else if (e.currentTarget.dataset.type == 4) {
                _request
                    .postObj(
                        '/yidou/order/confirmreceipt',
                        {
                            id: vm.orderinfo.id
                        },
                        app.globalData.mallType
                    )
                    .then((res) => {
                        if (res.data.code == 200) {
                            uni.showToast({
                                title: '收货成功',
                                icon: 'none',
                                duration: 1000
                            });
                            setTimeout(() => {
                                uni.navigateBack({
                                    delta: -1
                                });
                            }, 1000);
                        }
                    })
                    .catch((error) => {
                        console.log(error, 'error');
                    });
            }
        },

        fuzhifun(e) {
            uni.setClipboardData({
                data: e.currentTarget.dataset.num,
                success: function (res) {
                    // wx.showModal({
                    //   title: '提示',
                    //   content: '复制成功',
                    //   showCancel: false
                    // });
                }
            });
        },

        openkefu() {
            this.setData({
                show1: !this.show1
            });
        },

        getshow1() {
            this.setData({
                show1: !this.show1
            });
        },

        callphone() {
            uni.makePhoneCall({
                phoneNumber: '0755-84659719'
            });
        },

        //查看物流信息
        toDetail(e) {
            uni.navigateTo({
                url: `../../pages/mallorder/logistics/index?kid=${e.currentTarget.dataset.num || ''}&type=1`
            });
        },

        // 倒计时
        gettimerse() {
            timerse = setInterval(() => {
                let createordertime = this.orderinfo.createtimelong / 1000 + 86400; //结束待支付时间

                createordertime--;
                let now = new Date().getTime() / 1000; //当前时间换时间戳

                let diff = parseInt(createordertime - now);

                if (diff < 0) {
                    clearInterval(timerse); // wx.navigateBack({
                    //   delta: 1
                    // })
                } else {
                    let date = this.formattime(diff * 1000);
                    this.setData({
                        times: date
                    });
                }
            }, 1000);
        },

        //格式化时间
        formattime(time) {
            //格式化时间戳
            var leave1 = time % (24 * 3600 * 1000); //计算小时

            var hour = Math.floor(leave1 / (3600 * 1000));
            var leave2 = leave1 % (3600 * 1000); //计算分钟

            var minute = Math.floor(leave2 / (60 * 1000));
            var leave3 = leave2 % (60 * 1000); //计算秒

            var second = Math.round(leave3 / 1000) == '60' ? '00' : Math.round(leave3 / 1000);
            return [hour, minute, second].map(this.formatNumber).join(':');
        },

        formatNumber(n) {
            n = n.toString();
            return n[1] ? n : '0' + n;
        },

        getTitle(status) {
            console.log(status);
            let title = '';

            switch (status) {
                case 0:
                    title = '待付款';
                    break;

                case 1:
                    title = '待发货';
                    break;

                case 2:
                    title = '待收货';
                    break;

                case 3:
                    title = '兑换成功';
                    break;

                default:
                    title = '订单详情';
                    break;
            }

            console.log(title);
            return title;
        },

        goshopingmall() {
            console.log('占位：函数 goshopingmall 未声明');
        },

        preventTouchMove() {
            console.log('占位：函数 preventTouchMove 未声明');
        }
    }
};
</script>
<style>
page {
    background: #fbfbfb;
}

.pages {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #fbfbfb;
}

.fuzhi {
    position: absolute;
    right: 30rpx;
    top: 30rpx;
}

.topbox {
    width: 710rpx;
    height: 180rpx;
    background: #fff;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    box-shadow: 2rpx 2rpx 8rpx 0rpx rgba(236, 236, 236, 0.4);
    border-radius: 12rpx;
}

.topboxaddicon {
    width: 80rpx;
    height: 80rpx;
    margin-left: 20rpx;
}

.toptext {
    display: flex;
    align-items: center;
}

.contenttext {
    width: 670rpx;
    padding: 30rpx 20rpx;
    background: #fff;
    margin-top: 20rpx;
    border-radius: 4rpx;
    box-shadow: 2rpx 2rpx 8rpx 0rpx rgba(236, 236, 236, 0.4);
    display: flex;
}

.contenttextimg {
    width: 180rpx;
    height: 180rpx;
}

.douzi {
    width: 32rpx;
    height: 32rpx;
    margin-right: 10rpx;
}

.remarks {
    width: 710rpx;
    min-height: 100rpx;
    box-shadow: 2rpx 2rpx 8rpx 0rpx rgba(236, 236, 236, 0.4);
    border-radius: 12rpx;
    align-items: center;
    display: flex;
}

.remarksimg {
    width: 32rpx;
    height: 32rpx;
    margin-right: 6rpx;
}

.numbox {
    width: 710rpx;
    height: 320rpx;
    box-shadow: 2rpx 2rpx 8rpx 0rpx rgba(236, 236, 236, 0.4);
    border-radius: 12rpx;
    display: flex;
    flex-flow: column;
}

.numboximg {
    width: 32rpx;
    height: 32rpx;
}

.numboxlist {
    width: 670rpx;
    margin: 16rpx auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.numboxlistleft {
    display: flex;
    align-items: center;
}

.numsbottom {
    border-top: 1rpx solid #cacaca;
    padding: 20rpx 0;
    margin: 20rpx auto;
}

.zscontent {
    width: 670rpx;
    padding: 20rpx;
}

.subbtn {
    width: 670rpx;
    height: 88rpx;

    border-radius: 44rpx;
    margin: 60rpx auto;
    text-align: center;
    line-height: 88rpx;
    color: #fff;
    font-size: 32rpx;
}

.subbtn1 {
    background: #cfcfcf;
    color: #fff;
}

.show_box {
    width: 650rpx;
    line-height: 90rpx;
}

.zscontents {
    width: 670rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
}

.sunbtn1 {
    width: 260rpx;
    height: 88rpx;
    background: #cfcfcf;
    border-radius: 44rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 32rpx;
    color: #fff;
}

.sunbtn11 {
    width: 260rpx;
    height: 88rpx;
    background: #ff8722;
    border-radius: 44rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 32rpx;
    color: #fff;
}

.sunbtn-type2 {
    width: 260rpx;
    height: 88rpx;
    border: 2rpx solid #ff8722;
    border-radius: 44rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 32rpx;
    color: #ff8722;
    z-index: 999;
}

.sunbtn2 {
    width: 260rpx;
    height: 88rpx;
    background: #ff8722;
    border-radius: 44rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 32rpx;
    color: #fff;
    margin-left: 70rpx;
}

.pages .btn-wl {
    position: absolute;
    right: 16rpx;
    margin-top: 24rpx;
    border-radius: 44rpx;
    text-align: center;
    font-size: 24rpx;
    color: #252323;
    padding: 6rpx 24rpx;
    border: 1px solid #9c9c9c;
}
</style>
